<template>
  <div>
    <FormPanel ref="formPanel" :list="topFilterList" :cols="2" :isSubmitBtn="false" @formChange="searchSalesPart" />
    <div class="serach-button-style">
      <el-button size="small" type="primary" @click="queryClick">查 询</el-button>
      <el-button size="small" type="primary" @click="resetClick">重 置</el-button>
    </div>
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      height="300"
      columnsRef="partPartPurchasePurchaseOrderCheckWebsiteModel"
      selectionType="single"
      :datakey="'rows'"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="columns => (this.onChangeColumn = columns)"
    />

    <div class="confirm-button-style">
      <el-button type="primary" @click="saveDialog">确 定</el-button>
      <el-button @click="closeDialog">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { getPartNetwork } from '@/api/part/partPurchase/purchaseOrderCheck';

export default {
  name: 'websiteModel',
  mixins: [dictionary],
  props: ['rowData'],
  data() {
    return {
      topFilterList: this.createForm(),
      BaseTable: '',
      onChangeColumn: [],
      columns: this.createTableColumns(),
      fetchApi: getPartNetwork,
      fetchParams: { xhrAbort: false }
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.topFilterList.find(x => x.fieldName === 'websiteName').initialValue = this.rowData ? this.rowData : '';
  },
  methods: {
    createForm() {
      return [
        {
          type: 'INPUT',
          label: '网点名称',
          fieldName: 'websiteName'
        },
        {
          type: 'INPUT',
          label: '网点代码',
          fieldName: 'websiteCode'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '网点代码',
          dataIndex: 'businessNetworkCode'
        },
        {
          title: '网点名称',
          dataIndex: 'businessNetworkName',
          showOverflowTooltip: true
        },
        {
          title: '联系人',
          dataIndex: 'contactorByPart'
        },
        {
          title: '移动电话',
          dataIndex: 'mobileByPart'
        },
        {
          title: '联系电话',
          dataIndex: 'contactPhoneByPart'
        },
        {
          title: '收货人',
          dataIndex: 'receiverByPart'
        },
        {
          title: '地址',
          dataIndex: 'addressByPart',
          showOverflowTooltip: true
        }
      ];
    },
    // 查询
    queryClick() {
      this.$refs.formPanel.SUBMIT_FORM();
    },
    // 重置
    resetClick() {
      this.$refs.formPanel.RESET_FORM();
    },
    // 点击取消关闭窗口
    closeDialog() {
      this.$emit('closeDialog');
    },
    searchSalesPart(val) {
      const params = Object.assign({}, val, { xhrAbort: false });
      this.fetchParams = params;
    },
    saveDialog() {
      console.log(this.onChangeColumn.length);
      if (this.onChangeColumn.length > 0) {
        this.$emit('saveDialog', { businessNetworkCode: this.onChangeColumn[0].businessNetworkCode, businessNetworkName: this.onChangeColumn[0].businessNetworkName });
      } else {
        return this.$notify.warning({ title: '提示信息', message: '需选中一条数据' });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.confirm-button-style {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
  border-top: 1px solid #e9e9e9;
  padding: 10px 20px;
  background: #fff;
  text-align: center;
}
.serach-button-style {
  text-align: center;
}
</style>
